<template>
    <div class="canvas-container">
        <div ref="canvas" class="canvas-content"></div>
        <div class="canvas-opers">
            <button @click="evtAddPerson">添加人物</button>
            {{eventFlag.isPinch}}
            {{eventFlag}}
            {{pinchRatio}}
        </div>
    </div>
</template>
<script type="text/javascript">
    import * as PIXI from 'pixi.js'

    PIXI.Graphics.prototype.drawDashedPolygon = function(t, e, r, n, i, o, s) {
                var a, u, h, l = 0,
                    c = 0;
                if (s > 0) {
                    var d = (i + o) * s;
                    d < i ? l = i - d : c = o - (d - i)
                }
                var f = [];
                for (a = 0; a < t.length; a++) {
                    var p = {
                        x: t[a].x,
                        y: t[a].y
                    }, v = Math.cos(n),
                        y = Math.sin(n),
                        g = p.x,
                        m = p.y;
                    p.x = g * v - m * y, p.y = g * y + m * v, f.push(p)
                }
                for (a = 0; a < f.length; a++) {
                    u = f[a], g = (h = a == f.length - 1 ? f[0] : f[a + 1]).x - u.x, m = h.y - u.y;
                    var _ = Math.sqrt(g * g + m * m),
                        b = {
                            x: g / _,
                            y: m / _
                        }, x = 0;
                    for (this.moveTo(e + u.x + c * b.x, r + u.y + c * b.y); x <= _;) x += c, (x += l > 0 ? l : i) > _ ? (l = x - _, x = _) : l = 0, this.lineTo(e + u.x + x * b.x, r + u.y + x * b.y), (x += o) > _ && 0 == l ? c = x - _ : (c = 0, this.moveTo(e + u.x + x * b.x, r + u.y + x * b.y))
                }
        }
    export default {
        data() {
            return {
                app: null,
                selected: null,
                pinchRatio: 1,
                dataList: {
                },
                // 画布宽高?
                fWdith: 2 * document.body.offsetWidth,
                fHeight: 2 * document.body.offsetHeight,
                eventFlag: {
                    fingerNumberOfStart: 0,
                    fingerNumberOfMove: 0,
                    fingerNumberOfEnd: 0,
                    pinchRatio: 1,
                    isPinch: !1,
                    isIconUse: !1
                },
                containerInfo: {
                    width: 413,
                    height: 569,
                    x: 220,
                    y: 300
                },
            }
        },
        mounted() {
            const { Loader } = PIXI.loaders;
            const loader = new Loader();
            loader
                .add('stageBg-0', '/static/bg/room1.jpg')
                .add('btn-scale', '/static/scale.png')
                .add('btn-delete', '/static/delete.png')
                .load((loader, resource) => {
                    this.dataList = resource
                    this.initStage();
                })
        },
        methods: {
            initStage() { // 初始化舞台
                this.app = new PIXI.Application(this.fWdith, this.fHeight, {
                    preserveDrawingBuffer: !0,
                    forceCanvas: !0
                })
                this.$refs.canvas.html = '';
                this.$refs.canvas.appendChild(this.app.view);
                this.$refs.canvas.getElementsByTagName("canvas")[0].style.width = "100%";
                this.$refs.canvas.getElementsByTagName("canvas")[0].style.height = "auto";
                this.renderContainerToStage(this.dataList['stageBg-0'], 'stage');
            },
            // 在stage里添加一个container
            renderContainerToStage(item, nm) {
                const { Container } = PIXI;
                const box = new Container();
                const subContainer = new Container();
                const offsetX = Math.ceil(50 * Math.random() + 1);
                const offsetY = Math.ceil(50 * Math.random() + 1);
                box.name = Date.now();
                box.interactive = true;
                subContainer.pivot.set(subContainer.width / 2, subContainer.height / 2);
                subContainer.name = 'subContainer';
                const sprite = new PIXI.Sprite.from(item.texture);
                subContainer.addChild(sprite);
                box.addChild(subContainer);

                switch (nm) {
                    case 'stage': // 绘制背景
                        const f = document.body.offsetHeight;
                        box.y = 0;
                        box.x = 0;
                        // box.y = f > 1136 ? -100 : f > 800 ? -100 : -200, box.x = 0;
                        const radio = box.children[0].width / 1 / box.children[0].height;
                        box.width = 2 * document.body.offsetWidth, box.height = box.width / radio;
                    break;
                    case 'body':
                        const o = this;
                        box.x = this.containerInfo.x + offsetX;
                        box.y = this.containerInfo.y + offsetY;
                        subContainer.fixedWidth = .6 * this.containerInfo.width;
                        subContainer.fixedHeight = .6 * this.containerInfo.height;
                        // 添加拖拽事件
                        box.on("pointerdown", function(t) {
                            o.eventFlag.isPinch || o.handleSelectedContainer(t.currentTarget), this.isChildOperation || t.currentTarget != o.selected || (this.isDown = !0, this.originPostion = t.data.getLocalPosition(this.parent), t.stopPropagation())
                        }).on("pointercancel", function(t) {
                            this.isChildOperation || t.currentTarget != o.selected || (this.isDown = !1, this.originPostion = null)
                        }).on("pointerup", function(t) {
                            this.isChildOperation || t.currentTarget != o.selected || (this.isDown = !1, this.originPostion = null)
                        }).on("pointermove", function(t) {
                            if (this.isDown && !this.isChildOperation && t.currentTarget == o.selected) {
                                    var c = t.data.getLocalPosition(this.parent);
                                    this.x += c.x - this.originPostion.x, this.y += c.y - this.originPostion.y, this.originPostion = c
                                }
                        });
                        // 添加操作按钮
                        const dashLine = this.creatDashRec(subContainer.width, subContainer.height, 2);
                        const deleIcon = this.creatDeleteIcon(subContainer.width, subContainer.height, 2);
                        const scaleIcon = this.creatScaleIcon(subContainer.width, subContainer.height, 2);
                        // 物品绘制虚线
                        subContainer.addChild(dashLine);
                        // 盒子添加按钮
                        box.addChild(deleIcon, scaleIcon);
                    break;
                }

                this.app.stage.addChild(box);
            },
            creatDashRec: function(t, e) {
                var r = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 1,
                    n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 16777215;
                t = Number(t), e = Number(e), r = Number(r);
                var i = [];
                i.push({
                    x: 0,
                    y: 0
                }), i.push({
                    x: t,
                    y: 0
                }), i.push({
                    x: t,
                    y: e
                }), i.push({
                    x: 0,
                    y: e
                });
                var o = new PIXI.Graphics;
                o.name = "dashRec", o.x = 0, o.y = 0, o.beginFill(n, 0), i.forEach(function(t, e) {
                    0 == e ? o.moveTo(t.x, t.y) : o.lineTo(t.x, t.y)
                }), o.endFill(), o.lineStyle(r, n, .7), o.beginFill(n, 1);
                return o.drawDashedPolygon(i, 0, 0, 0, 10, 5, (Date.now() % 750 + 1) / 750), o
            },
            creatDeleteIcon: function(t, e, r) {
                var n = this,
                    i = new PIXI.Sprite.from(this.dataList['btn-delete'].texture);
                return i.name = "deleteIcon", i.x = -i.width / 2, i.y = Math.abs(e) - i.height / 2, i.interactive = false, i.on("pointertap", function(t) {
                    this.parent.getChildByName("subContainer").children.forEach(function(t) {
                        var e = t.name.split("-");
                        if (!(e.length < 2)) {
                            var r = e[0],
                                i = Number(e[1]) - 1,
                                o = n.dataList[r][i];
                            (n.isFaceu && "1" == o.appLock || !n.isFaceu && "1" == o.webLock) && n.handleLockList(o, "rm")
                        }
                    }), t.stopped = !0, this.parent.destroy(), n.selected = null, n.elCount--, 0 != n.elCount || n.isFinish || (n.isFinish = !0), window.collect && window.collect("adjust_june_school_material", {
                        move_type: "cancel"
                    })
                }), i
            },
            creatScaleIcon: function(t, e, r) {
                var n = this,
                    i = new PIXI.Sprite.from(this.dataList['btn-scale'].texture);
                return i.name = "scaleIcon", i.x = Math.abs(t) - i.width / 2, i.y = -i.height / 2, i.interactive = !0, i.on("pointerdown", function(t) {
                    if (n.eventFlag.isPinch = !0, this.isDown = !0, 1 == t.data.originalEvent.changedTouches.length) {
                        var e = this.parent.getChildByName("subContainer");
                        e.faceuScaleRatio = Math.abs(e.width / 1 / e.height)
                    }
                    t.reset(), t.stopPropagation(), window.collect && window.collect("adjust_june_school_material", {
                        move_type: "zoom"
                    })
                }).on("pointerup", function() {
                    n.eventFlag.isPinch = !1, this.parent.isChildOperation = !1, this.isDown = !1, this.originPosition = !1, this.oldDistance = null
                }).on("pointerupoutside", function() {
                    this.parent.isChildOperation = !1, this.isDown = !1, this.originPosition = !1, this.oldDistance = null
                }).on("pointermove", function(t) {
                    if (this.isDown && 1 == t.data.originalEvent.changedTouches.length) {
                        var e = this.parent.getChildByName("subContainer"),
                            r = false,
                            i = e.parent.x,
                            o = 2 * t.data.originalEvent.changedTouches[0].pageX,
                            s = Math.abs(e.width),
                            a = Math.abs(e.height),
                            u = o - i,
                            h = Math.abs(u) / e.faceuScaleRatio,
                            l = (u - s) / 1 / s,
                            c = r ? -l : l,
                            d = Math.abs(e.scale.x + c);
                        d = (d = d < .5 ? .5 : d) > 4 ? 4 : d;
                        Math.abs(e.scale.x);
                        u <= .5 * e.fixedWidth && (u = .5 * e.fixedWidth, h = .5 * e.fixedHeight), u >= 4 * e.fixedWidth && (u = 4 * e.fixedWidth, h = 4 * e.fixedHeight);
                        var f = (u - s) / 2,
                            p = (h - a) / 2;
                        u = r ? -u : u, e.width = u, e.height = h, e.parent.x -= f, e.parent.y -= p, e.x = r ? Math.abs(u) : 0, n.keepIconShape(this)
                    }
                }), i
            },
            keepIconShape: function(t) { // 保持按钮的形状
                var e = t.parent.getChildByName("subContainer"),
                    r = Math.abs(e.width),
                    n = Math.abs(e.height);
                t.parent.children.forEach(function(t) {
                    switch (t.name) {
                        case "deleteIcon":
                            t.x = -t.width / 2, t.y = n - t.height / 2;
                            break;
                        case "scaleIcon":
                            t.x = r - t.width / 2, t.y = -t.height / 2;
                            break;
                        case "mirrorIcon":
                            t.x = r - t.width / 2, t.y = n - t.height / 2
                    }
                })
            },
            handleSelectedContainer: function(t) {
                if (!this.isGameOver || !t) {
                    var e = null;
                    this.selected && this.selected !== t && (this.selected.getChildByName("subContainer").getChildByName("dashRec").visible = !1, this.selected.getChildByName("deleteIcon").visible = !1, this.selected.getChildByName("scaleIcon").visible = !1, e = this.selected), e && (e.oldGroup = e.parentGroup, e.parentGroup = this[e.level + this.originGroupText], e.zIndex = this[e.level + this.originGroupIndexText]++), t && (t.getChildByName("subContainer").getChildByName("dashRec").visible = !0, t.getChildByName("deleteIcon").visible = !0, t.getChildByName("scaleIcon").visible = !0, t.oldGroup = t.parentGroup, t.parentGroup = this[t.level + this.groupText], this.handleCatClick(t.catIndex)), t && t.cat && "diy" == t.cat && (this.diyActiveIndex = 1), this.selected = t
                }
            },
            handleCatClick: function(t) {
                this.activeIndex = t, (this.selected && this.selected.cat && "diy" != this.selected.cat || !this.selected) && (this.diyActiveIndex = 0)
            },
            evtAddPerson() {
                const { Loader } = PIXI.loaders;
                const loader = new Loader();
                loader
                    .add('body', '/static/body/body.png')
                    .load((loaders, resource) => {
                        this.renderContainerToStage(resource['body'], 'body')
                    })
            }
        }
    }
</script>
<style type="text/css">
    html, body, #app, .canvas-container {
        width: 100%;
        height: 100%;
    }
    .canvas-content {
        height: 100%;
        overflow: hidden;
    }
    .canvas-container {
        position: relative;
    }
    .canvas-opers {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        overflow: hidden;
        z-index: 6;
        background-color: rgba(0,0,0,.5);
    }
    button {
        width: 150px;
        height: 40px;
        background-color: #fff;
        border: 1px solid #ccc;
        font-size: 24px;
    }
</style>